<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"
    ></script>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"
    ></script>
    <script type="text/javascript">
      var dom = document.getElementById('container');
      var myChart = echarts.init(dom);
      var app = {};
      let imgSrc =
        '';
      // 数据初始化
      let fontColor = '#18DB9F',
        echartData = [
          {
            name: '1分',
            value: 100
          },
          {
            name: '2分',
            value: 200
          },
          {
            name: '3分',
            value: 200
          },
          {
            name: '4分',
            value: 100
          },
          {
            name: '5分',
            value: 100
          }
        ];
      // 数据整理
      let total = echartData.reduce((a, b) => {
        return a + b.value;
      }, 0);
      let legendOption = {
        top: 'center',
        orient: 'vertical',
        icon: 'circle',
        itemWidth: 12,
        itemGap: 13,
        textStyle: {
          fontSize: 14,
          rich: {
            name: {
              color: '#333333',
              padding: [10, 5, 30, 5]
              // align: 'right'
              // width: 60
            },
            percent: {
              color: fontColor,
              fontSize: 18,
              padding: [0, 5, 0, 5]
              // align: 'right'
            }
          }
        },
        formatter: function(name) {
          let res = echartData.filter(v => v.name === name);
          let percent = ((res[0].value * 100) / total).toFixed(2);
          return '{name| ' + name + '}\n{percent|' + percent + '%}';
        }
      };
      option = null;
      option = {
        backgroundColor: '#FFFFFF',
        color: [
          '#06FDBC',
          '#F6FE05',
          '#07B0FE',
          '#FDB408',
          '#00DB1C',
          '#0188FE'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image: imgSrc,
                width: 90,
                height: 90
              },
              left: 'center',
              top: '36%',
              position: [100, 100]
            }
          ]
        },
        title: {
          text: '评分总人数',
          top: '58%',
          textAlign: 'center',
          left: '50%',
          textStyle: {
            color: fontColor,
            fontSize: 20,
            fontWeight: '400'
          }
        },
        legend: [
          {
            left: 60,
            data: ['5分', '4分', '3分'],
            align: 'right',

            ...legendOption
          },
          {
            right: 60,
            data: ['1分', '2分'],
            align: 'left',
            ...legendOption
          }
        ],
        toolbox: {
          show: false
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: [0, 150],
            center: ['50%', '50%'],
            label: {
              show: false
            },
            itemStyle: {
              normal: {
                color: 'rgba(24,219,159,0.1)'
              }
            },
            hoverAnimation: false,
            data: [100]
          },
          {
            name: '',
            type: 'pie',
            radius: [120, 135],
            center: ['50%', '50%'],
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                shadowBlur: 10,
                shadowColor: 'rgba(24,219,159,0.6)'
              }
            },
            hoverAnimation: false,
            hoverOffset: 5,
            data: echartData
          },
          {
            name: '',
            type: 'pie',
            radius: [0, 105],
            center: ['50%', '50%'],
            label: {
              show: false
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.RadialGradient(
                  0.5,
                  0.5,
                  0.7,
                  [
                    {
                      offset: 0.5,
                      color: '#ffffff'
                    },
                    {
                      offset: 1,
                      color: '#18DB9F'
                    }
                  ],
                  false
                )
              }
            },
            hoverAnimation: false,
            data: [100]
          }
        ]
      };
      if (option && typeof option === 'object') {
        myChart.setOption(option, true);
      }
    </script>
  </body>
</html>
